<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">客户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入昵称" v-model="query">
            <el-button slot="append" @click="serch" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
<!--          <el-button type="primary" icon="el-icon-plus" circle @click="addLevel" ></el-button>-->
          <el-button type="info" icon="el-icon-refresh" circle @click="refresh"></el-button>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table :key="Math.random()"
                :data="tableData"
                border
                style="width: 100%" >
        <el-table-column
            fixed
            align="center"
            prop="id"
            label="Id"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="username"
            label="账号"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="password"
            label="密码"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="昵称"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="headPic"
            label="头像"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="sex"
            label="性别"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.sex==1">男</p>
            <p type="danger" v-else>女</p>
          </template>
        </el-table-column>
        <el-table-column width="120"
                         prop="phoneNum"
                         label="手机号"
                         align="center">
        </el-table-column>
        <el-table-column width="120"
                         align="center"
                         prop="accountBalance"
                         label="账户余额"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="integration"
            label="积分"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="growth"
            label="成长值"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="historyIntegration"
            label="历史积分数量"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="memberLevel"
            label="会员级别"
        >
            <template slot-scope="scope">{{ scope.row.memberLevel.name }}</template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="address"
            label="地址"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="email"
            label="邮箱"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="pathFront"
            label="正面证件照"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="pathReverse"
            label="反面证件照"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="licenseNo"
            label="驾照号"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="status"
            label="状态"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.status==0">启用</p>
            <p type="danger" v-else>禁用</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="160">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  size="medium" circle @click="editLevel(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete"  size="medium" circle @click="deleteClientLevel(scope.row.id,scope.row.status)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <!--修改弹框的 表单 -->
      <el-dialog
          title="修改会员等级信息"
          :visible.sync="EditDialogVisible"
          width="60%"

      >
        <div>
          <el-form :model="EditFormData" status-icon :rules="EditFormRules" ref="EditRuleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col>
                <el-form-item label="昵称" prop="name">
                  <el-input  type="text" v-model="EditFormData.name" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="账号" prop="username">
                  <el-input type="text" v-model="EditFormData.username" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="邮箱" prop="email">
                  <el-input  type="text" v-model="EditFormData.email" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="手机号" prop="phoneNum">
                  <el-input type="text" v-model="EditFormData.phoneNum" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="地址" prop="address">
                  <el-input  type="text" v-model="EditFormData.address" autocomplete="off" ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="性别" prop="sex">
                  <template>
                    <el-radio v-model="EditFormData.sex" label="1">男</el-radio>
                    <el-radio v-model="EditFormData.sex" label="0">女</el-radio>
                  </template>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="状态" prop="status">
                  <el-radio v-model="EditFormData.status" :label="0">启用</el-radio>
                  <el-radio v-model="EditFormData.status" :label="1">禁用</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="EditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditLevel">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "level",
  data() {
    return {
      //查询条件
      query:"",
      //当前页码
      currentPage: 1,
      //每页显示记录
      pageSize:5,
      //总条数
      total:0,
      //当前的记录数据
      tableData: [],
      //是否打开修改弹框 true 打开 false 关闭
      EditDialogVisible: false,
      //修改弹框表单的数据
      EditFormData:{},
      //下拉框
      options: [],
      //修改弹框 表单的 规则
      EditFormRules:{
        name: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        username:[
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email:[
          {required:true,message:"邮箱不能为空",trigger:"blur"},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        phoneNum:[
          {required:true,message:"手机号不能为空",trigger:"blur"},
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        address:[
          { required: true, message: '地址不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    //页面加载自动执行
    this.ininLevelTable(this.currentPage,this.pageSize);
    //下拉框赋值
    //this.xialakuang();
  },
  methods: {
    //给表单赋值，显示数据
    ininLevelTable(currentPage,pageSize){
      var that=this;
      this.$http.post(`/customer/client/findClientByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (resp) {
        if (resp.data.code===200){
          that.tableData=resp.data.data.records;
          that.total=resp.data.data.total;
        }else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    //修改每页几条的方法
    handleSizeChange(val) {
      this.pageSize=val;
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //修改页数的方法
    handleCurrentChange(val) {
      this.currentPage=val;
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //模糊查询按钮的方法
    serch(){
      this.currentPage=1,
      this.pageSize=5,
      this.ininLevelTable(this.currentPage,this.pageSize);
    },
    //修改弹框回显的方法
    editLevel(id){
      this.EditDialogVisible = true;
      var that = this;
      this.$http.get(`/customer/client/getClientById/${id}`).then(function (resp){
        that.EditFormData=resp.data.data;
      })
    },
    //表单清空
    closAll(){
      this.$refs.insertRuleForm.resetFields();
    },
    //刷新局部页面
    refresh (){
      this.query='';
      this.ininLevelTable(1,this.pageSize);
    },
    //确认修改等级信息
    confirmEditLevel(){
      var that = this;
      this.$refs['EditRuleForm'].validate((valid) => {
        if (valid) {
          that.$http.put("/customer/client/updateClient/",this.EditFormData).then(function (resp){
            if (resp.data.code === 200){
              that.$message.success("修改成功");
              that.EditDialogVisible=false;
              that.ininLevelTable(that.currentPage,that.pageSize);
            }else{
              that.$message.error(resp.data.msg);
            }
          })
        }
      })
    },
    //删除会员管理
    deleteClientLevel(id,status){
      var that=this;
      this.$confirm('确定删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (`${status}`!=1){
          that.$message.error("该会员还未禁用，不能删除！");
        }else {
          this.$http.delete(`/customer/client/deleteClient/${id}`).then(function (resp) {
            if (resp.data.code != 200) {
              return that.$message.error("删除失败");
            } else {
              if (that.total%that.pageSize==1){
                that.currentPage--;
              }else {
                that.currentPage = that.currentPage;
              }
              that.$message.success("删除成功");
              that.ininLevelTable(that.currentPage, that.pageSize);
            }
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style scoped>

</style>